<template>
	<scroll-view class="content-warpper">
		<LocalDialog :show="showDialog" v-on:save='saveHospital' :hospitalNameList="hospitalNameList" :hospitalList="hospitalList"
		 :bedNameList='bedNameList' :deptList='deptList' :hospitalName="hospital.name" :bedName="bedName" />
		<form report-submit="true" @submit="formSubmit">
			<picker id="hospital" @change="bindPickerChange" :value='hospitalIndex' :range="hospitalNameList">
				<view class="content-item">
					<text name="hospital">{{hospital.name}}</text>
					<image src="../../static/ic_arrow_bottom.png" />
				</view>
			</picker>
			<view class="line" />
			<picker id="dept" @change="bindPickerChange" :value='deptIndex' :range="bedNameList">
				<view class="content-item">
					<text name=" dept">{{bedName}}</text>
					<image src="../../static/ic_arrow_bottom.png" />
				</view>
			</picker>
			<view class="text-item">
				<image src="../../static/ic_phone.png" />
				<text>联系方式</text>
			</view>
			<view class="line" />
			<view class="content-item">
				<text>手机号码</text>
				<input name="patientPhone" type="number" maxlength="11" placeholder="请输入手机号码" placeholder-class="input-hint" />
			</view>
			<view class="text-item">
				<image src="../../static/ic_info.png" />
				<text>病人信息</text>
				<view class="exchange" @click="showPatient">
					<text>{{isShow?"收起":"展开"}}</text>
					<image src="../../static/ic_open_down.png" />
				</view>
			</view>
			<view class="line" />
			<view class="patient-info" v-show="isShow">
				<view class="content-item">
					<text>病人姓名</text>
					<input name="patientName" type="text" placeholder="请输入姓名" placeholder-class="input-hint" />
				</view>
				<view class="line" />
				<picker id="sex" @change="bindPickerChange" :value="sexIndex" :range="sexList">
					<view class="content-item">
						<text>性别</text>
						<view class="content-item-text">{{sex}}</view>
						<image src="../../static/ic_arrow_bottom.png" />
					</view>
				</picker>
				<view class="line" />
				<picker name="wishServiceTime" mode="date" :value="wishTime" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="content-item">
						<text>服务预约时间</text>
						<view class="content-item-text">{{wishTime}}</view>
						<image src="../../static/ic_arrow_bottom.png" />
					</view>
				</picker>
				<view class="line" />
				<view class="content-item">
					<text>年龄</text>
					<input name="age" type="number" placeholder="请输入年龄" placeholder-class="input-hint" />
				</view>
				<view class="line" />
				<view class="content-item">
					<text>床号</text>
					<input type="text" name="badNum" placeholder="请输入床号" placeholder-class="input-hint" />
				</view>
			</view>
			<view class="text-item">
				<image src="../../static/ic_remark.png" />
				<text>备注</text>
			</view>
			<view class="line" />
			<view class="remark">
				<textarea name="remark" />
				</view>
			 <view class="btn-content">
				 	<button class="btn"  form-type="submit">确认预约</button>
			 </view>
		</form>
	</scroll-view>
</template>
<script> 
import LocalDialog from	 "../../components/LocalDialog.vue"
	import util from "../../util/textUtil.js"
	export default {
		components:{
			LocalDialog
		},
		data() {
			return {
				showDialog:false,
				selectShow:false,
				selectIndex:0,
				hospitalList:[],
				hospitalNameList:[],
				hospital:{},
				deptList:[],
				bedNameList:[],
				department:{
					"areaName":"",
					"floor":"",
					"layer":""
				},
				sexList:["男", "女",],
				phone: '',
				age: '',
				sex:'男',
				gender:1,
				wishTime:'',
				isShow:false,
				remark:"",
			    type:0,
				bedName:"",
				deptIndex:0,
				hospitalIndex:0,
				sexIndex:0,
			    orgId:"",
			    areaId:""
			}
		},
		onLoad() {
        uni.setNavigationBarTitle({
        	title:"预定"
        });
		this.orgId = util.getUrlParam("orgId");
		this.areaId = util.getUrlParam("areaId");
		//console.log("this.orgId:"+this.orgId);
		//console.log("this.areaId:"+this.areaId);
		 this.getInfo();
		},
		onShow() {
			// let token = "14fe485fea2507a1138d4fea7bcb56a1";
			// getApp().globalData.token  = "14fe485fea2507a1138d4fea7bcb56a1"
			// if(token !=null ||token!="" ){
			// 	this.getList();
			// }
		},
	  computed: {
	        startDate() {
	            return this.getDate('start');
	        },
	        endDate() {
	            return this.getDate('end');
	        }
	    },
		methods: {
			getInfo:function(){
				let that = this;
				let code = util.getUrlParam("code");
				uni.request({
					url:getApp().globalData.baseUrl+'app/wxLogin/' + code,
					method: 'GET',
					success(res) {
						console.log(res);
						if (res.data.code == 0) {
							getApp().globalData.token = res.data.token;
							that.getList();
						}
					}
				});
			},
		    getList:function(){			
			 this.$store.dispatch("getHospitalList").then((res)=>{
				 this.hospitalNameList=[];
				 this.hospitalList = res;
				 for(let i=0;i<res.length;i++){
				     this.hospitalNameList.push(res[i].name);
					 if(res[i].id== this.orgId){
						this.hospitalIndex=i;
					 }
				 }
				
				// console.log(  this.hospitalNameList);
				 this.showDialog  = true;
				 if(res.length>0){
					 this.hospital = res[this.hospitalIndex];
					 this.getDeptList();
				 }
			 });
	
			},
            getDeptList:function(){
				this.$store.dispatch("getDepartmentList",  this.hospital.id).then((depts)=>{
					this.department ={};
					this.bedName= "";	
				    this.deptList = depts;
					this.bedNameList = [];
					for(let i=0;i<depts.length;i++){
						let item = depts[i];
						let bedName= item.areaName+item.floor+item.layer;
					    this.bedNameList.push(bedName);
						if(item.areaId==this.areaId){
							this.deptIndex = i;
						}
				   }
			//	   console.log("deptIndex="+this.deptIndex)
				 if(depts.length>0){
				    this.department = depts[this.deptIndex];
			     	this.bedName= this.department.areaName+this.department.floor+ this.department.layer;	
					console.log( this.bedName);
                   }
				});
			},
			getDate:function(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			},
		    bindPickerChange: function(e) {
				let type=  e.currentTarget.id;
				let index = e.target.value;
		     	if(type=="hospital"){
				    this.hospitalIndex=index;
					 this.hospital = this.hospitalList[index];
					  this.getDeptList();
				}else if(type=="dept"){
					this.deptIndex=index;
					this.department = this.deptList[index];
					this.bedName= this.department.areaName+this.department.floor+ this.department.layer;	
				}else if(type=="sex"){
					this.sexIndex = index;
					this.sex = this.sexList[index];
					this.gender = index+1;
				}
			},
			saveHospital:function(e){
				this.showDialog = false;
				console.log("xxxxxxxxxxx",e);
				let hIndex= e.hospitalIndex;
				let dIndex= e.deptIndex;
			    this.deptList = e.deptList;
				this.bedNameList = e.bedNameList;
				this.hospitalIndex=hIndex;
				this.deptIndex=dIndex;
				this.hospital=this.hospitalList[hIndex];
				this.department =this.deptList[dIndex];
				this.bedName= this.department.areaName+this.department.floor+ this.department.layer;	
			},
			showPatient:function(){
			    let isShow = this.isShow;
				this.isShow = !isShow;
				console.log('点击点击')
			},
			 bindDateChange: function(e) {
			    this.wishTime = e.target.value
			 },
			formSubmit:function(e){
				if(!this.hospital.id){
					uni.showToast({
						title:"请选择医院",
							icon:"none"
					})				  
					return;
				}
				if(!this.department.id){
					uni.showToast({
						title:"请选择科室",
						icon:"none"
					})				  
					return;
				}
				if( !e.detail.value.patientPhone){
					uni.showToast({
						title:"请填写手机号码！",
						icon:"none"
					})				  
					return;
				}
				if( !e.detail.value.remark){
					uni.showToast({
						title:"备注不能为空！",
						icon:"none"
					})				  
					return;
				}
				let param = e.detail.value;
				param.deptId = this.department.id;
				param.orgId = this.hospital.id;
				param.areaId = this.department.areaId;
				param.gender = this.gender;
			    uni.request({
			    	url:getApp().globalData.baseUrl+ 'order/order/save',
			    	method: 'POST',
			    	data: param,
					header: {
						"token":getApp().globalData.token
					},
			    	success: res => {
						console.log(res);
						
						if(res.data.code==0){	
							uni.navigateTo({
								url: 'finish',
								success: res => {
									console.log("下单成功！")
								}
							});
						}
					},
			    	fail: () => {
						uni.showToast({
							title:"服务器异常！",
							icon:"none"
						})			
					},
			    	
			    });
				 
			
			}
		
		}
	}
</script>

<style>
	.content-warpper {
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 100vh;
		background-color: #ebebeb;
	}

	.content-item {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		height: 90upx;
		align-items: center;
		padding: 0 20upx;
	}

	.content-item text {
		font-size: 28upx;
		color: #757575;
		flex: 1;
	}
    .content-item-text{
		font-size: 28upx;
		color: #757575;
		margin-right: 10upx;
	}
	.content-item image {
		width: 25upx;
		height: 25upx;
		justify-content: flex-end;
	}
    
	.text-item {
		background-color: #FFFFFF;
		margin-top: 20upx;
		display: flex;
		flex-direction: row;
		padding: 0 20upx;
		height: 90upx;
		align-items: center;
	}

	.text-item image {
		width: 22upx;
		height: 32upx;
		margin-right: 20upx;
	}
	.text-item .exchange {
		display: flex;
		height: 100%;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		flex: 1;   
	}
	.text-item .exchange  text{
		 font-size: 24upx;
		 color: #8a8a8a;
		 margin-right: 20upx;
	}
	.text-item .exchange  image{
		 width: 25upx;
		 height: 25upx;
		
	}
	.text-item text {
		font-size: 32upx;
		color: #424242;
	}
	.content-item input {
		width: 70%;
		height: 90upx;
		text-align: right;
		color: #a4457d;
	}

	.input-hint {
		font-size: 28upx;
		color: #e0b9cd;
	}
	.patient-info{
		display: flex;
		flex-direction: column;
	}
	.remark{
		background-color: #FFFFFF;
		align-items: center;
		justify-content: center;
		display: flex;
		padding:20upx;
	}
	.remark textarea{
		height: 120upx;
		border: solid 2upx #e0e0e0;
		border-radius: 5upx;
		width: 100%;
		padding: 10upx;
		font-size: 28upx;
	}
	.btn-content{
		width: 100%;
		flex: 1;
		background-color: #ebebeb;
	}
	.btn{
		width: 360upx;
		height: 80upx;
		background-color: #b3548a;
		color: #FFFFFF;
		font-size: 32upx;
		margin: 60upx auto;
	    
	}
</style>
